<template>
    <h1 class="mod-title">
        <span :class="PayInfo.type == 'wx' ? 'ico_log ico-3' : 'ico_log ico-4'"></span>
    </h1>

    <div class="mod-ct">
        <div class="order"></div>

        <div style="margin-top: 10px;">
            <span style="color: red;">提示：付款金额要与显示的金额一致，否则后果自负</span>
        </div>

        <div class="amount" id="money">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{{ PayInfo.price }}</span>元
            <span @click="OnCopy" style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span>
        </div>

        <!-- 收款码 -->
        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" class="qrcode-img-area">
                <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                <div style="position: relative;display: inline-block;">
                    <img id="imgCode" :src="PayInfo.wxcode" style="width: 220px;" v-if="PayInfo.type === 'wx'" />
                    
                    <img id="imgCode" :src="PayInfo.zfbcode" style="width: 220px;" v-else-if="PayInfo.type === 'zfb'" />
                </div>
            </div>
        </div>

        <!-- 订单信息 -->
        <div class="time-item" style="padding-top: 10px">
            <div class="time-item" id="msg">
                <h1 class="overtime">订单名称：{{ PayInfo.name }}<span></span></h1>
            </div>

            <div class="time-item">
                <h1>订单号:<span data-payid="">{{ PayInfo.code }}</span></h1>
                <input type="hidden" :value="PayInfo.id" id="payid">
            </div>

            <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
            <strong id="minute_show">0分</strong>
            <strong id="second_show">0秒</strong>
            <div class="time-item"></div>
        </div>

        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
                <p id="showtext" v-if="PayInfo.type === 'wx'">打开微信[扫一扫]</p>
                <p id="showtext" v-else-if="PayInfo.type === 'zfb'">打开支付宝[扫一扫]</p>
            </div>
        </div>


    </div>
</template>


<script setup>
    const {proxy} = getCurrentInstance()

    let payid = ref(proxy.$route.query.payid ?? 0)
    let PayInfo = ref({})

    // 有效期的倒计时
    const MaxTime = ref(3 * 60);// 默认多少时间关闭当前页面
    const timers = ref(null) //倒计时的定时器
    const interval = ref(null) //查询订单状态的定时器

    onBeforeMount(() => GetPayInfo())

    //请求支付订单
    const GetPayInfo = async () =>
    {
        let params = {
            payid: payid.value
        }

        let result = await proxy.$POST({
            url:'/pay/info',
            params
        })

        if(result.code == 0)
        {
            proxy.$fail({
                message: result.msg,
                onClose: () => proxy.$router.back()
            })
            return false
        }

        PayInfo.value = result.data
        
        // 倒计时
        timers.value = setInterval(CountDown, 1000)
        interval.value = setInterval(GetStatus, 3000) //查询订单的支付状态
    }

    //复制金额
    const OnCopy = () => 
    {
        let text = document.getElementById('copyText').innerText
        var input = document.createElement('input')
        input.setAttribute('id', 'copyInput')
        input.value = text

        //将元素追加到body中
        document.getElementsByTagName('body')[0].appendChild(input);

        //选中input的文本
        document.getElementById('copyInput').select()

        //执行浏览器拷贝动作
        document.execCommand('copy')

        proxy.$success('已复制金额')

        //拷贝完成后将input元素移出
        document.getElementById('copyInput').remove()
    }

    //有效期倒计时
    const CountDown = () =>
    {
        if(MaxTime.value >= 0)
        {
            let minutes = Math.floor(MaxTime.value / 60) //还剩下多少分钟
            let seconds = Math.floor(MaxTime.value % 60) //还剩下多少秒数

            document.getElementById('minute_show').innerText = `${minutes} 分`
            document.getElementById('second_show').innerText = `${seconds} 秒`

            --MaxTime.value
        }else
        {
            //倒计时要结束
            clearInterval(timers.value)
            clearInterval(interval.value)

            // 过期图片
            document.getElementById('imgCode').src = '/assets/pay/images/qrcode_timeout.png';

            proxy.$alert({
                title: '支付提示',
                message: '支付订单已失效'
            }).then(() => proxy.$router.back())

            return false
        }
    }

    //查询订单的支付状态
    const GetStatus = async () =>
    {
        let params  = {
            payid:payid.value
        }

        let result = await proxy.$POST({
            url:'/pay/status',
            params
        })

        if(result.code == 0)
        {
            if(result.msg === '支付订单不存在')
            {
                proxy.$fail({
                    message:result.msg,
                    onClose:() =>
                    {
                        proxy.$router.back();
                    }
                })
            }

            return false
        }

        clearInterval(timers.value)
        clearInterval(interval.value)

        //提醒
        proxy.$alert({
            title: '支付提示',
            message: '支付成功'
        }).then(() => {

            // 兼容购买商品跳转到订单详情
            if(result.data.jump.includes('?') === true)
            {
                // path 路径 queryString 参数
                let [path, queryString] = result.data.jump.split('?');

                // 存放重组后的参数
                let query = {};

                // 参数存在就进入if
                if(queryString)
                {
                    // 遍历参数
                    queryString.split('&').forEach(param => {
                        let [key, value] = param.split('=');
                        query[key] = isNaN(value) ? value : Number(value);
                    });
                }

                // 先判断商品立即购买在本地存储当中是否存在缓存,如果有缓存就删除缓存
                let cart = Object.getOwnPropertyNames(proxy.$cart.value).length > 0 ? proxy.$cart.value : [];

                if(cart.length > 0)
                {
                    proxy.$cart.value = {};
                }
                
                proxy.$router.push({path,query,replace:true});
            }else
            {
                //从购物车走过来的
                proxy.$router.push({path:result.data.jump,replace:true});
            }
            
        })
    }











</script>



<style scoped>
    @import url('/assets/css/cashier.css');
</style>